<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>组件</h1>
      <hr />
      <!-- 使用组件: 
      当vue组件到这个组件的时候,会用test组件中template的结构覆盖这个`<test></test>`
      -->
      <!-- 了解: 不使用脚手架的情况下,使用组件写单标签,会影响到后面的内容渲染 -->
      <!-- <test /> -->
      <p>xxxxxxxxxxxxxxxxxxxxxxxx</p>
      <hr />
    </div>

    <div id="root">
      <h1>这是root</h1>
      <test-xxx></test-xxx>
      <p>alsjdfkasdfjas</p>
    </div>

    <script src="./vue.js"></script>

    <script>
      // 定义组件
      // 标准写法: const xxx = Vue.extend(配置对象)
      // 简写: const xxx = 配置对象
      const xxx = {
        template: `<div>
            <h2>Test组件</h2>
            <p>{{msg}}</p>
            <button @click="msg = msg + 1">setMsg</button>
            <button @click="handle">setMsg</button>
          </div>`,
        // 组件中定义数据的data必须是函数.是为了保证创建出来的所有实例都有一份自己的数据
        data() {
          return {
            msg: 'hello component',
          }
        },

        methods: {
          handle() {
            this.msg = this.msg + 9
          },
        },
      }
      // 全局注册组件
      // 注意: 调用一次component只能注册一个组件
      // Vue.component('组件名',组件)
      // 组件名总结:
      // 1. 忽略大小写
      // 2. 如果名字是驼峰命名法,使用时,可以写驼峰,也可以写-

      Vue.component('testXxx', xxx)
      const vm = new Vue({
        el: '#app',
        // 局部注册
        // 注意:组件的名字是由注册时的键决定的
        // components: {
        //   // 键: 值
        //   // 键就是组件的名字
        //   // 值就是组件
        //   test: xxx,
        // },
      })

      const rootVm = new Vue({
        el: '#root',
      })
    </script>
  </body>
</html>
